<template>
  <BasicTable @register="registerTable">
    <template #tableTitle>
      <Button type="primary" style="display: flex" @click="handleEdit(false)">
        <span style="font-size: 26px; line-height: 16px">+</span> 新增会议室
      </Button>
    </template>
    <!--          onClick: handleDel.bind(null, record), -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <TableAction
          :actions="[
            { label: '编辑', onClick: handleEdit.bind(null, true, record) },
            {
              label: '删除',
              popConfirm: {
                title: '是否删除当前会议室？',
                okText: '删除',
                confirm: handleDel.bind(null, record),
                placement: 'bottom',
              },
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>

  <AddRoom @register="resigterModal" @success="hanldeSuccess" />
</template>

<script setup lang="ts">
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './setting-room';
  import { Button } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { ref } from 'vue';
  import AddRoom from './components/add-room.vue';

  import { getMeetingList, delMeetingRoom } from '/@/api/admin/meeting';
  import { getDictTypeListApi } from '/@/api/admin/dict';
  import { DICT } from '/@/enums/dict';

  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const [registerTable, { reload }] = useTable({
    api: getMeetingList,
    columns: columns,
    showIndexColumn: false,
    searchInfo: {
      searchType: 1,
    },
    formConfig: {
      schemas: searchFormSchema,
      labelWidth: 100,
    },

    useSearchForm: true,
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
    },
  });

  const options = ref<any[]>([]);

  // 获取设备列表
  const getDeviceInformation = async () => {
    options.value = await getDictTypeListApi({ type: DICT.DEVICE_INFORMATION });
  };

  const [resigterModal, { openModal, closeModal }] = useModal();

  const handleEdit = (isUpdate, record?: object) => {
    console.log(`${isUpdate ? '编辑' : '新增'}-------------`, record, isUpdate);
    const obj = record ? record : {};
    openModal(true, { ...obj, isUpdate: isUpdate, options: options.value });
  };

  const handleDel = async (record) => {
    await delMeetingRoom([record.id]);
    createMessage.success('删除成功');
    reload();
  };

  const hanldeSuccess = () => {
    reload();
    closeModal();
  };

  getDeviceInformation();
</script>

<style lang="less" scoped></style>
